<html>
<head><title>VocaDB API sample page</title></head>
<body>

	<h1>VocaDB API demo v0.3</h1>

	<p>

		<input size="40" type="text" id="pvUrl" />
	
		<button id="parseUrlBtn">Parse URL</button><br /><br />
	
	</p>

    <table>
		<tr>
			<td>Service</td>
			<td>
				<select id="pvService">
					<option value="NicoNicoDouga">NicoNico</option>
					<option value="SoundCloud">SoundCloud</option>
					<option value="Youtube">Youtube</option>
					<option value="Vimeo">Vimeo</option>
				</select>
			</td>
		</tr>
        <tr>
            <td>PV ID</td>
            <td><input type="text" id="pvId" /></td>
        </tr>
    </table>

    <button id="getBtn">Get info</button><br /><br />

    <textarea cols="40" rows="20" id="result"></textarea>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="APIv1.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

			$("#parseUrlBtn").click(function() {
			
				parsePVUrl("http://vocadb.net", $("#pvUrl").val(), function (result) {
				
					if (result) {
						
						$("#pvService").val(result.Service);
						$("#pvId").val(result.PVId);
						
						$("#getBtn").click();
						
					}
				
				});
			
			});
		
            $("#getBtn").click(function () {

                byPV("http://vocadb.net", $("#pvService").val(), $("#pvId").val(), function (result) {

					if (result) {
						var id = result.Id;
						var name = result.Name;
						var artists = result.ArtistString;
						$("#result").text("ID: " + id + "\nName: " + name + "\nArtists: " + artists);
					} else {
						$("#result").text("Not found or invalid!");						
					}

                });

            });

        });

    </script>

</body>
</html>
